<template>
	<view v-if="info.id" style="padding-bottom: 150rpx;">
		<goods :list="goods" v-if="goods.length"></goods>


		<view class="mode u-flex u-row-between">
			<view class="u-flex">
				<u-icon name="map-fill" size="40" color="#2980FF"></u-icon>
				<view class="u-margin-left-20" style="width: 500rpx;">
					<view>
						<text style="font-size: 32rx;font-weight: bold;">{{info.recipient}}</text>
						<text style="color:#999999;margin-left: 20rpx;margin-top: 10rpx;">{{info.phone}}</text>
					</view>
					<view class="">
						{{info.address}}
					</view>
				</view>
			</view>
		</view>

		<view class="mode  u-margin-top-20" v-if="info.remark">
			<u-cell-item title="商品备注" :value="info.remark" :arrow="false" :border-bottom="false" :hover-class="false">
			</u-cell-item>
		</view>

		<view class="mode  u-margin-top-20">
			<u-cell-item title="订单号" :value="info.outTradeNo" :arrow="false" :border-bottom="false"
				:hover-class="false">
				<template slot="right-icon">
					<text style="color: #007AFF;margin-left: 10rpx;" @click="copy(info.outTradeNo)">复制</text>
				</template>
			</u-cell-item>
			<u-cell-item v-if="info.expressNo" title="物流单号" :value="info.expressNo" :arrow="false"
				:border-bottom="false" :hover-class="false">
				<template slot="right-icon">
					<text style="color: #007AFF;margin-left: 10rpx;" @click="copy(info.expressNo)">复制</text>
				</template>
			</u-cell-item>
		</view>

		<view class="mode  u-margin-top-20">
			<u-cell-item title="商品总价" :value="info.totalMoney" :arrow="false" :border-bottom="false"
				:hover-class="false"></u-cell-item>
			<u-cell-item title="优惠券抵扣" :value="info.saleMoney" :arrow="false" :border-bottom="false"
				:hover-class="false"></u-cell-item>
			<u-cell-item title="商品运费" :value="info.expressFee" :arrow="false" :border-bottom="false"
				:hover-class="false"></u-cell-item>
			<u-cell-item title="应付金额" :value-style="{color:'#DD5044'}" :value="(Number(info.totalMoney)+Number(info.expressFee) ).toFixed(2)  " :arrow="false" :border-bottom="false" :hover-class="false">
			</u-cell-item>
			<u-cell-item title="实际支付" :value-style="{color:'#DD5044'}" :value="(Number(info.payMoney)+Number(info.balance)).toFixed(2)" :arrow="false" :border-bottom="false" :hover-class="false">
			</u-cell-item>
			<u-cell-item title="支付方式"  :value="info.payWay" :arrow="false" :border-bottom="false" :hover-class="false">
			</u-cell-item>
			
			
		</view>


		<view class="mode  u-margin-top-20">
			<u-cell-item title="提交时间" :value="info.createTime" :arrow="false" :border-bottom="false"
				:hover-class="false">

			</u-cell-item>
			<u-cell-item v-if="info.payTime" title="支付时间" :value="info.payTime" :arrow="false" :border-bottom="false"
				:hover-class="false">

			</u-cell-item>


		</view>



		<view v-if="info.status==1 || info.status==4 && !info.state"
			style="align-items: center; background: #fff; border-top: 1rpx solid #e1e1e1; padding: 20rpx; position: fixed;z-index: 999;bottom: 0;display: flex;justify-content: space-between;width: 100%;">

			<view class="u-flex-1" style="font-size: 50rpx;color: #FF5D39;" v-if="info.status==1 ">￥{{info.totalMoney}}
			</view>


			<view class="u-flex-1" style="font-size: 50rpx;color: #FF5D39;" v-if="info.status==4">￥{{info.payMoney}}
			</view>


			<view class="u-flex u-flex-1 u-row-between" v-if="info.status==1">
				<u-button @click="close" shape="circle"
					:custom-style="{background:'#4066F4',color:'#fff',width:'150rpx',fontSize:'24rpx'}">
					取消订单</u-button>
				<u-button shape="circle" @click="pay"
					:custom-style="{background:'#FF5D39',color:'#fff',width:'150rpx',fontSize:'24rpx'}">
					立即支付</u-button>
			</view>

			<view class="u-flex u-flex-1 u-row-between" v-if="info.status==4 ">
				<u-button @click="apply" shape="circle"
					:custom-style="{background:'#4066F4',color:'#fff',width:'150rpx',fontSize:'24rpx'}">
					申请售后</u-button>
				<u-button shape="circle" @click="sure"
					:custom-style="{background:'#FF5D39',color:'#fff',width:'150rpx',fontSize:'24rpx'}">
					确认收货</u-button>
			</view>
		</view>

		<view v-if="info.state" style="align-items: center; background: #fff; border-top: 1rpx solid #e1e1e1; padding: 20rpx; position: fixed;z-index: 999;bottom: 0;display: flex;justify-content:flex-end;width: 100%;">

			<u-button  shape="circle" open-type="contact"
				:custom-style="{background:'#4066F4',color:'#fff',width:'150rpx',fontSize:'24rpx'}">
				客服</u-button>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import goods from './components/goods.vue';
	import payway from '@/common/wxpay.js';
	export default {
		components: {
			goods
		},
		data() {
			return {
				id: '',
				goods: [],
				info: {

				},
				banShare: true
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.jiazai()
		},
		methods: {
			jiazai() {
				this.$u.post('/indent/orderDetail', {
					order_id: this.id
				}).then(res => {
					this.goods = [res];
					this.info = res;
				}).catch(err => {

				})
			},
			apply() {
				uni.navigateTo({
					url: "./apply?id=" + this.id
				})
			},
			sure() {
				this.$u.post('/indent/signFor', {
					order_id: this.id
				}).then(res => {
					this.$refs.uToast.show({
						title: '收货成功',
						type: 'success',
						back: true,
					})
				}).catch(err => {

				})


			},
			copy(e) {
				uni.setClipboardData({
					data: e
				})
			},
			close() {
				this.$u.post('/indent/clearOrder', {
					order_id: this.id
				}).then(res => {
					this.$refs.uToast.show({
						title: '已取消',
						type: 'errow',
						back: true,

					})

				}).catch(err => {

				})

			},
			pay() {
				this.$u.post('/indent/pay', {
					order_id: this.id
				}).then(res => {
					if (!Array.isArray(res)) {
						var packages = res.package;
						var {
							noncestr,
							timestamp,
							signtype,
							paysign
						} = res
						payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {


							this.$refs.uToast.show({
								title: '购买成功',
								type: 'success',
								back: true,

							})

						}).catch(err => {
							uni.navigateBack({

							})
						})
					} else {

						this.$refs.uToast.show({
							title: '购买成功',
							type: 'success',
							callback: () => {
								uni.switchTab({
									url: "../book/index"
								})
							}
						})

					}

				}).catch(err => {

				})



			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}
</style>
